<template>
  <div class="layer h-screen gap-3 bg-white">
    <div class="section px-14 pt-34 gap-1 text-center">
      <div class="title-lg">欢迎使用</div>
      <div class="title-4xl text-emerald-500 drop-shadow">鑫毅会员系统</div>
      <div class="">精准管理 高效营销 提升忠诚 助力增长</div>
    </div>

    <div class="section px-14 pt-2 gap-3">
      <xoFormInput placeholder="账号" :ruleMessage="loginRuleModel.username.ruleMessage" v-model="loginModel.username"
        @onValid="loginRuleModel.username.valid" />

      <xoFormInput type="password" placeholder="密码" :ruleMessage="loginRuleModel.password.ruleMessage"
        v-model="loginModel.password" @onValid="loginRuleModel.password.valid" />

      <div class="mt-6 btn-primary" @click="handleClickLogin">
        <div class="icon-xl i-mdi-arrow-right-thin-circle-outline animate-pulse"></div>
        <div class="text-white">立即注册</div>
      </div>

      <div class="text-center text-emerald-500 underline" @click="">
        游客试用
      </div>
    </div>

    <div class="mt-10 section center">
      <div class="desc">--- 鑫毅智慧 卓越赋能 ---</div>
    </div>
  </div>
</template>

<script setup lang="ts">

import useLogin from '@monorepo/hooks/useLogin'
import xoFormInput from '@/components/xoUI/xoFormInput.vue'
import { uniRequestPrivoder } from '@/utils/http'
import { successedToast } from '@/utils'

const { loginModel, loginRuleModel, login } = useLogin(uniRequestPrivoder)


const handleClickLogin = () => {
  login((data) => {
    console.log(data);
  })
}

</script>

<style></style>
